<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="/js/jquery-3.4.1.slim.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
        .form-signin .checkbox {
            font-weight: 400;
        }
        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }
        .form-signin .form-control:focus {
            z-index: 2;
        }
        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>
<body >

<!-- Modal -->
<div class="modal fade" id="falseModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">注册失败</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你的账号名已经被注册了,请更换一个账号名.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<form class="form-signin" method="post" th:action="@{registerUser}" th:object="${user}">
    <img class="mb-4" src="imgs/logo.png" alt="" width="300" height="130">
    <h1 class="h4 mb-3 font-weight-normal">必  填</h1>

    <label for="name" class="sr-only">user name</label>
    <input type="text" id="name" class="form-control" th:field="*{username}"
           placeholder="name" required autofocus>

    <label for="password" class="sr-only">Password</label>
    <input type="password" id="password"  th:field="*{password}" class="form-control"
           placeholder="Password" required>

    <label for="Email">*邮箱*</label>
    <input type="email" class="form-control"  th:field="*{email}" id="Email" placeholder="email">

    <label for="phone">*电话*</label>
    <input type="number" class="form-control"  th:field="*{phone}" id="phone" placeholder="phone">

    <label for="WeChat">*微信*</label>
    <input type="text" class="form-control"  th:field="*{wechat}" id="WeChat"
           placeholder="wechat">

    <button class="btn btn-lg btn-warning btn-block mt-2" type="submit">注  册</button>
    <a class="btn btn-success btn-lg btn-block "  href="login" role="button">已注册去登陆</a>
    <p class="mt-5 mb-3 text-muted">&copy; 佛大叮当闲置交易论坛</p>
</form>
</body>


<script th:inline="javascript">
    var data = [[${message}]];
    if (data=="false"){
        $('#falseModal').modal('show')
    }
</script>

</html>